<template>
    <div class="homepage-hero-module">
        <div class="video-container">
            <div :style="fixStyle" class="filter">

                <div style=" width: 400px; margin: 150px auto">
                    <div style="font-size: 30px; text-align: center; padding: 30px 0; color: #cccccc">欢迎登录</div>
                    <el-form ref="form" :model="form" size="large" :rules="rules">

                        <el-form-item prop="username">
                            <el-input prefix-icon="set-up" v-model="form.username" placeholder="请输入账号"></el-input>
                        </el-form-item>

                        <el-form-item prop="password">
                            <el-input prefix-icon="success-filled" v-model="form.password" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>

                        <el-form-item>
                          <el-radio v-model="form.role" :label="1" style="color: white">管理员</el-radio>
                          <el-radio v-model="form.role" :label="0" style="color: white">普通用户</el-radio>
                        </el-form-item>

                        <el-form-item>
                            <div style="display: flex">
                                <el-input prefix-icon="el-icon-key" v-model="form.validCode" style="width: 50%;margin-right: 5px" placeholder="请输入验证码"></el-input>
                                <ValidCode @input="createValidCode" style="background-color: #fff0e6"/>
                            </div>
                        </el-form-item>

                            <el-button style="width: 100%" type="primary" @click="login" >登 录</el-button>


                            <el-button type="text" @click="$router.push('/register') " style="color: white">
                                前往注册 >>
                            </el-button>

                    </el-form>
                </div>
            </div>
            <video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
                <source src="../assets/sea.mp4" type="video/mp4"/>
                浏览器不支持 video 标签，建议升级浏览器。
            </video>
        </div>
    </div>

</template>

<script>
    import request from "../utils/request";
    import ValidCode from "@/components/ValidCode";


    export default {
        name: "Login",
        components: {
            ValidCode,

        },

        data() {
            return {
                form: {
                    username: 'admin',
                    password: "admin",
                    role: 1,
                    //表单的验证码
                    validCode: '',


                },
                //页面刷新的验证吗
                validCode: '',


                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                },
                //视频动态背景
                    //视频是否可以播放
                vedioCanPlay: false,
                    //自动适应高度
                fixStyle: '',
            }
        },

        mounted() {
            //在登入页删除用户信息
            sessionStorage.removeItem("user")
            //跟据客户屏幕比例，自动适应
            window.onresize = () => {
                const windowWidth = document.body.clientWidth
                const windowHeight = document.body.clientHeight
                //屏幕高宽比
                const windowAspectRatio = windowHeight / windowWidth
                let videoWidth
                let videoHeight
                if (windowAspectRatio < 0.5625) {
                    videoWidth = windowWidth
                    videoHeight = videoWidth * 0.5625
                    this.fixStyle = {
                        height: windowWidth * 0.5625 + 'px',
                        width: windowWidth + 'px',
                        'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                        'margin-left': 'initial'
                    }
                } else {
                    videoHeight = windowHeight
                    videoWidth = videoHeight / 0.5625
                    this.fixStyle = {
                        height: windowHeight + 'px',
                        width: windowHeight / 0.5625 + 'px',
                        'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                        'margin-bottom': 'initial'
                    }
                }
            }
            window.onresize()
        },

        methods: {
            //input事件接收输入框验证吗
            createValidCode(data) {
                this.validCode = data
            },


            login() {
                //判断合法
                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        if (!this.form.validCode) {
                            this.$message.error("请填写验证码")
                            return
                        }
                        if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
                            this.$message.error("验证码错误")
                            return
                        }

                        request.post("/user/login", this.form).then(res => {
                            if (res.code === '0') {
                                this.$message.success("登入成功");

                                sessionStorage.setItem("user", JSON.stringify(res.data));//缓存用户信息
                                this.$router.push("/")
                            } else {
                                this.message.error("登入失败")
                            }
                        })
                    }
                })


            },

            //动态背景
            canplay() {
                this.vedioCanPlay = true
            },
        }

    }
</script>
<style scoped>
    .homepage-hero-module,
    .video-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    .video-container .poster img{
        z-index: 0;
        position: absolute;
    }

    .video-container .filter {
        z-index: 1;
        position: absolute;
        /*background: rgba(0, 0, 0, 0.4);*/
        width: 100%;
    }

    .fillWidth {
        width: 100%;
    }
</style>
